<!doctype html>
<%@page import="com.cn.ccp.service.system.UserService"%>
<%@page import="com.cn.ccp.util.Contants"%>
<%@page import="java.util.Iterator"%>
<%@page import="java.util.List"%>
<%@page import="com.cn.ccp.bean.MenuBean"%>
<%@page import="java.util.Map"%>
<%@page contentType="text/html;charset=UTF-8"%>
<jsp:directive.page import="com.cn.ccp.bean.UserBean" />
<jsp:directive.page import="com.cn.ccp.bean.MenuBean" />
<jsp:directive.page import="java.util.List" />
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%
	String path = request.getContextPath();
	String basePath1 = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	
	UserBean users = (UserBean) session.getAttribute(Contants.USER_SESSION_BEAN);
%>
<html>
<f:view>
<head>
<title>Online Education</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- styles -->
    <link href="<%=basePath1%>/css/bootstrap.css" rel="stylesheet">
    <link href="<%=basePath1%>/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="<%=basePath1%>/css/custom.css" rel="stylesheet">
       
    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<%=basePath1%>/images/icon/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<%=basePath1%>/images/icon/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<%=basePath1%>/images/icon/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="<%=basePath1%>/images/icon/apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="<%=basePath1%>/images/icon/favicon.png">
    
    <script type="text/javascript">
    var goto_top_type = -1;  
    var goto_top_itv = 0;  
      
    function goto_top_timer() {  
        var y = goto_top_type == 1 ? document.documentElement.scrollTop  
                : document.body.scrollTop;  
        var moveby = 15;  
        y -= Math.ceil(y * moveby / 100);  
        if (y < 0) {  
            y = 0;  
        }  
        if (goto_top_type == 1) {  
            document.documentElement.scrollTop = y;  
        } else {  
            document.body.scrollTop = y;  
        }  
        if (y == 0) {  
            clearInterval(goto_top_itv);  
            goto_top_itv = 0;  
        }  
    }  
      
    function goto_top() {  
        if (goto_top_itv == 0) {  
            if (document.documentElement && document.documentElement.scrollTop) {  
                goto_top_type = 1;  
            } else if (document.body && document.body.scrollTop) {  
                goto_top_type = 2;  
            } else {  
                goto_top_type = 0;  
            }  
            if (goto_top_type > 0) {  
                goto_top_itv = setInterval('goto_top_timer()', 50);  
            }  
        }  
    }  

				</script>
    
    <style type="text/css">
    	 
		/*左侧菜单*/
		.sidebar-menu{
			border-right: 1px solid #c4c8cb;
		}
		/*一级菜单*/
		.menu-first{
			height:54px;
			line-height:54px;
			border-top: 1px solid #efefef;
			border-bottom: 1px solid #e1e1e1;
			padding: 0;
			font-size: 14px;
			font-weight: normal;
			 
		}
		/*一级菜单鼠标划过状态*/
		.menu-first:hover{
			text-decoration: none;
			background-color: #d6d4d5;
			border-top: 1px solid #b7b7b7;
			border-bottom: 1px solid #acacac;
		}
		/*二级菜单*/
		.menu-second li a{
			background-color: #f6f6f6;
			height:31px;
			line-height:31px;
			border-top: 1px solid #efefef;
			border-bottom: 1px solid #efefef;
			font-size: 12px; 
		}
		/*二级菜单鼠标划过样式*/
		.menu-second li a:hover {
			text-decoration: none;
			background-color: #66c3ec;
			border-top: 1px solid #83ceed;
			border-bottom: 1px solid #83ceed;
			border-right: 3px solid #f8881c;
			border-left: 3px solid #66c3ec;
		}
		/*二级菜单选中状态*/
		.menu-second-selected {
			text-decoration: none;
			background-color: #66c3ec;
			border-top: 1px solid #83ceed;
			border-bottom: 1px solid #83ceed;
			border-right: 3px solid #f8881c;
			border-left: 3px solid #66c3ec;
		}
		/*覆盖bootstrap的样式*/
		.nav-list,.nav-list li a{
			padding: 0px;
			margin: 0px;
		}
		 
    </style>
    
</head>

<body style="color:000;overflow-y:hidden" scroll="no">
<!-- navbar -->
<header id="header">
<f:verbatim>

<div class="navbar navbar-static-top" >
     <div class="navbar-inner main-page-title">
       <div>
         <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         </button>
         <a class="brand" href="#" ></a>
         <div class="nav-collapse collapse pull-right">
	           	<ul class="nav">
	              <li>
	              </f:verbatim>
	              <h:form>
	              	<h:commandLink action="#{loginAction.logout}"  value="#{messages['btn_logout']}" styleClass="icon-user  icon-white">
	              		 
	              	</h:commandLink>
	              	 </h:form> 
	              	<f:verbatim>
	              </li>
	            </ul>
	          
          </div>
       </div>
     </div>
</div><!--/.navbar -->
</header>   
    <div class="container bg-white"  id="mainContenstDiv" style="position: relative; bottom: 0px; height:86%;margin-right:1px;margin-left:1px;width:auto">
    	<div class="row" style="height:100%;position:relative;bottom:0;">
        	<div class="span3" style="height:100%;position:relative;  bottom:0;"  id="sidebar">
            	<div class="sidebar-item h-100" style="height:105%;position:relative;bottom:0;width=80%;">
            	<%
					String userName = users.getUserName() ;
					String userTypeName = users.getUserTypeName();
					String specialtyName = users.getSpecialtyName();
					specialtyName = specialtyName != null ? specialtyName : "";
					String image = null;
					if(users.getHeadImage() != null && !"".equalsIgnoreCase(users.getHeadImage().trim()))
						image = "tempfile/"+users.getId()+"/head-image.png" ;
					else
						image = "images/teacher.png";
					//List<MenuBean> menuList = (List<MenuBean>)session.getAttribute("userMenu");
				%>
	            	<div class="media profile">
	                    <div class="media-thumb media-left">
	                        <a class="img-shadow" href="javascript:void(0);">
	                        	<div id="imageDivId">
	                        		<img id="imageid" class="thumb" src="<%=image%>">
	                        	</div>
	                        </a>
	                    </div>
	                    <div class="media-body">
	                        <h4 class="media-heading">
								<%=userName%> 
	                        </h4>
	                        <span><%=specialtyName%></span><br/>
	                    	<span><%=userTypeName%></span>
	                    </div>
	                </div>
	                
						 
					<!--Sidebar content-->
					 <div class="sidebar-menu" id="menuNav">
					
						<%
							Map<MenuBean ,List<MenuBean> > menuMap = (Map<MenuBean ,List<MenuBean> >)session.getAttribute(Contants.USER_SESSION_MENU);
							Iterator<MenuBean> iters = menuMap.keySet().iterator();
							String parentMenu = "parentMenu";
							int i = 0;
							while(iters.hasNext()){
								MenuBean mbean = iters.next();
								
								String cls = "icon "+mbean.getImage();
								if(menuMap.get(mbean).size() > 0){
									parentMenu = parentMenu + i++;
									%>
									<a href="#<%=parentMenu %>" class="nav-header" data-toggle="collapse"><i class="<%=cls %>" style="margin-left:17px" ></i> <%=mbean.getMenuName() %></a>
									<ul id="<%=parentMenu %>" class="nav nav-list collapse">
										<%
											List<MenuBean> mList = menuMap.get(mbean);
											for(MenuBean m : mList){
												String mCls = "icon "+m.getImage();
												%>
												<li><a href="<%=m.getLink() %>" target="contentsPages"><i class="<%=mCls %>"></i><%=m.getMenuName() %></a></li>
												<%
											}
										%>
									</ul>
									<%
								}else{
									%>
									<a href="<%=mbean.getLink() %>" class="nav-header"  target="contentsPages" ><i class="<%=cls%>" style="margin-left:17px"></i> <%=mbean.getMenuName() %></a>
									<%
								}
							}
						%>					
					</div>
               
                	
                </div>
            </div>
            <div id="content" style="height:80%">
              	<div class="content" id ="pageContents">
            	 <!-- style="position:absolute;top:0px;bottom:0px;left:300px;right:200px;width:100%;height:100%" -->
                   <iframe name="contentsPages" id="contentsPagesIframe" src="main.faces" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="auto" style="position:absolute;top:0px;bottom:15px;left:300px;right:0px;width:78%;height:100%;" vspace="-200"  height="100%" width="80%"></iframe>
                </div>
            </div>
        </div>
    </div>
    <!-- 
    <footer id="footer">
      <div style="text-align:center;height:30px;float:bottom;margin-bottom:0px;"><p>Copyright &copy; 2013</p></div>
    </footer>
     -->
   </f:verbatim>
    <script type="text/javascript" src="<%=request.getContextPath()%>/Webim/boot.html"></script>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <!--[if IE 6]>    
  <link href="<%=request.getContextPath()%>/css/ie6.css" rel="stylesheet">
  <script src="<%=request.getContextPath()%>/js/ie6.js"></script>
<![endif]-->
    <script>
      !function ($) {
        $(function(){
          // carousel demo
         
        })
      }(window.jQuery)
      
      var selected = null;
      $("#menuNav ul li").each(function(){$(this).click(function(){
			$("#menuNav ul li").removeAttr("class");	
			$(this).addClass("menu-second-selected");	
			//alert(document.getElementById("sidebar").scrollHeight);
			//if(document.getElementById("sidebar").scrollHeight > 600) {
				//var h = document.getElementById("sidebar").scrollHeight + 30;
				//window.top.document.body.style.height = h + 'px';
			//}
				//$('#mainContenstDiv').height( document.getElementById("sidebar").scrollHeight);  
		});});
      
      function noChildMenu(url){
    	  alert(url);
      }
      
      
      function getHtmlContentBySoap(url,showDivId){debugger;
      if(!url||url==""){
          document.getElementById(showDivId).innerHTML="";
          return;
      }
      if(window.XMLHttpRequest){
         req=new XMLHttpRequest();
      }else if(window.ActiveXObject){
         req=new ActiveXObject("Microsoft.XMLHTTP");
      }
      if(req){
          req.open("GET",url,true);
          req.onreadystatechange=function(){
              getHtmlContentBySoapCallBack(url,showDivId);            
         };
         req.send();
      }
  }
  function getHtmlContentBySoapCallBack(url,showDivId){
      if(req.readyState == 4){
          if(req.status == 200){
              if(document.getElementById(showDivId)){
                  document.getElementById(showDivId).innerHTML=req.responseText;
              }
          }
      }
  }
  $(function(){
		
		$('#myTab a').click(function (e) {
	  		e.preventDefault();
	  		$(this).tab('show');
		})
		
		//这部分是布局框架，必须最后加载！
	     windowResize();
	     $(window).resize(function() {
	     	windowResize();
	     });
	     
	     checkImage();
	     
	});
	function windowResize(){     
		//alert("$(window).width() =  "+$(window).width());
		if(768>=$(window).width()){
			$('#main').css('height','auto');
		}else{
			var h2=$('#header').height() || $('#header').outerHeight(true);
			var h1=$('#footer').height() || $('#footer').outerHeight(true); ;
			var h3=$(window).height() || $(document.body).outerHeight(true);
			var h= h3 - h1 - h2;
			$('#main').css('height','auto');
			$('#content').css('height','100%');
			$('#sidebar').css('height','100%');
			if($('#sidebar').height() >= h){
				if($('#sidebar').height() >= $('#content').height()){
					$('#main').css('height',$('#sidebar').height());
				}else{
					$('#main').css('height',$('#content').height());
				}
			}else if($('#content').height()>= h){
				if($('#sidebar').height() >= $('#content').height()){
					$('#main').css('height',$('#sidebar').height());
				}else{
					$('#main').css('height',$('#content').height());
				}
			}else{
				$('#content').css('height','100%');
				$('#sidebar').css('height','100%');
				$('#main').css('height','auto');
				$('#main').css('height',h);
			}
		
		}
	}  
	var uid = '<%=users.getId()%>';
	var fileName = "" ;
	var deleteFileName = "";
	function checkImage() {
		$.ajax({
			type : "get",
			url : "loadImage.do?uid="+uid+"&fileName="+fileName+"&deleteFileName="+deleteFileName ,
			cache : false,
			async : false,
			dataType: "text",
			success : function(data) {
				if(data != ''){
					arr = data.split(",");
					fileName = arr[1] ;
					deleteFileName = arr[0];
					document.getElementById("imageDivId").innerHTML = "<img src=" + deleteFileName + " class='thumb' />";
				}
				setTimeout("checkImage()",5000);
			}
		});
	}
	// setInterval("checkImage()",5*1000);
    </script>
</body>
</f:view>
</html>